<template>
  <div class="page-main" v-loading="loading">
    <div class="page-content">
      <div class="page-container title-container">
        <div class="page-title">待标注列表（{{total}}）</div>
        <div class="page-body">
          <el-table
            :data="tableData"
            style="width: 100%"
            highlight-current-row
            @current-change="handleCurrentChange"
            :max-height="300">
            <el-table-column label="标题" prop="voiceName"></el-table-column>
          </el-table>
        </div>
        <mine-pagination
          @numberChange="numberChange"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage">
        </mine-pagination>
      </div>
      <div class="page-container detail-container">
        <div class="page-title">音频详情</div>
        <div class="page-body">
          <!-- 音频播放器 -->
          <div v-if="currentRow">
            <div v-if="currentRow.relativePath">
              <audio-player :src="currentRow.relativePath" />
            </div>
            <div v-else>没有相关音频</div>
          </div>
        </div>
      </div>
    </div>
    <tagChoose ref="tagChoose" @change="handleTagChange" :tagList="tagList"></tagChoose>
    <div class="btn-row">
      <el-button type="primary" @click="submit">确认</el-button>
      <el-button @click="goBack">返 回</el-button>
    </div>
  </div>
</template>
<script>
import { detailMixins } from '../../mixins.js';
import tagChoose from '../../components/tagChoose.vue';
import { omit } from 'lodash';
export default {
  mixins: [detailMixins],
  components: {
    tagChoose,
  },
  data () {
    return {
      loading: false,
      tableData: [
      ],
      total:0,
      pageSize:10,
      currentPage: 1,
      currentRow: null,
      curTag: '',
      tagList: [],
    }
  },
  methods: {
    init () {
      this.loadData(true);
      this.loadTag();
    },
    async loadData (flag) {
      this.loading = true;
      if (flag) {
        this.currentPage = 1;
      }
      const params = {
        id: this.calibrationId,
        finisher: this.finisher,
        page: this.currentPage,
        pageSize: this.pageSize,
        completed: '0'
      };
      this.tableData = [];
      try {
        const res = await this.$store.dispatch('tagAdminCalibrationGetVoiceCalibrate', params);
        const result = res.data || {};
        if (result.success) {
          const data = result.data || {};
          this.tableData = data.list && data.list.length ? data.list : [];
          this.total = data.rowCount;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    async loadTag () {
      const params = {
        calibrationId: this.calibrationId,
      };
      try {
        const res = await this.$store.dispatch('tagAdminClassifySearch', params);
        const result = res.data || {};
        if (result.success) {
          const data = result.data || {};
          this.tagList = data && data.length ? data : [];
        } else {
          this.tagList = [];
        }
      } catch (e) {
        console.error(e);
      }
    },
    async submit () {
      const curTag = this.curTag;
      if (!this.currentRow) {
        this.$message({ type: 'warning', message: '请选择音频' });
        return;
      }
      if (!curTag) {
        this.$message({ type: 'warning', message: '请选择标签' });
        return;
      }
      const params = {
        calibrationId: this.id,
        list: []
      };
      const curTagItem = this.tagList.find(item => item.id === curTag);
      params.list = [this.currentRow].map(item => {
        return {
          ...omit(item, ['relativePath']),
          completed: '1',
          classifyId: curTagItem.id,
          classifyName: curTagItem.classifyName,
        };
      });
      this.loading = true;
      try {
        const res = await this.$store.dispatch('tagAdminCalibrationIdSaveVoiceCalibrate', params);
        const result = res.data || {};
        if (result.success) {
          this.$message({ type: 'success', message: '提交成功' });
          this.$parent.init();
        } else {
          this.$message({ type: 'error', message: '提交失败' });
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;
    },
    handleTagChange (value) {
      this.curTag = value;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    numberChange (val) {
      switch (val.flag) {
        case 'pageSize':
          this.pageSize = val.pageSize;
          this.loadData(true);
          break;
        case 'currentPage':
          this.currentPage = val.currentPage;
          this.loadData(false);
          break;
        default:
          break;
      }
    },
  }
}
</script>
<style lang="less" scoped>
@import url('./page.less');
</style>
